<template>
    <div ref="chartDom" :style="{ width, height }"></div>
</template>

  <script setup>
import {
    ref, onMounted, nextTick,
} from 'vue'
import * as echarts from 'echarts'
import { lineAreaOption } from './index'

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null)
const timer = ref(null)
let chartInstance = null

const propsData = defineProps({
    width: {
        type: String,
        default: '100%',
    },
    height: {
        type: String,
        default: '30vh',
    },
    chartData: {
        type: Object,
        default: () => ({}),
    },
})

function runHighlight(info) {
    timer.value && clearInterval(timer)
    let index = 0
    timer.value = setInterval(() => {
        chartInstance.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index,
        })
        // 显示提示框
        chartInstance.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
        })
        // 取消高亮指定的数据图形
        chartInstance.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index === 0 ? info.sData[0].value.length - 1 : index - 1,
        })
        chartInstance.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index,
        })
        index += 1
        if (index > info.sData[0].value.length - 1) {
            index = 0
        }
    }, 1000)
}

function hexToRgba(hex, opacity) {
    let rgbaColor = ''
    const reg = /^#[\da-f]{6}$/i
    if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt(`0x${hex.slice(1, 3)}`, 16)},${parseInt(`0x${hex.slice(3, 5)}`, 16)},${parseInt(`0x${hex.slice(5, 7)}`, 16)},${opacity})`
    }
    return rgbaColor
}

function changeData(info) {
    lineAreaOption.xAxis.data = info.xData
    lineAreaOption.xAxis.axisLabel.color = info.xColor || '#051024'
    lineAreaOption.xAxis.axisLine.lineStyle.color = info.xColor || '#051024'
    lineAreaOption.yAxis[0].axisLabel.color = info.yColor || '#000'
    lineAreaOption.yAxis[0].axisLine.lineStyle.color = info.yColor || '#000'
    lineAreaOption.legend.show = info.legendShow || false
    const list = []
    info.sData && info.sData.length > 0 && info.sData.map((item) => {
        const obj = {
            name: item.name,
            type: 'line',
            symbolSize: 3,
            smooth: true,
            zlevel: 3,
            itemStyle: {
                color: item.color || '#376E9F',
            },
            areaStyle: {
                color: item.color ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: hexToRgba(item.color, 0.3),
                },
                {
                    offset: 1,
                    color: hexToRgba(item.color, 0.1),
                },
                ], false) : '#376E9F',
            },
            data: item.value,
        }
        list.push(obj)
    })
    if (info.grid) {
        lineAreaOption.grid = info.grid
    }
    if (info.sData && info.sData.length > 0) {
        chartInstance.on('mouseover', () => {
            this.timer && clearInterval(this.timer)
        })
        chartInstance.on('mouseout', () => {
            runHighlight(info)
        })
        runHighlight(info)
    }
    lineAreaOption.series = list
    chartInstance.setOption(lineAreaOption)
}

watch(() => propsData.chartData, (n) => {
    if (chartInstance) {
        setTimeout(() => {
            chartInstance.resize()
        }, 10)
        changeData(n)
    }
}, { immediate: true, deep: false })

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
    await nextTick() // 确保DOM已经渲染完成
    chartInstance = echarts.init(chartDom.value)
    changeData(propsData.chartData)
})
  </script>
